import React, { memo } from "react";
import { shallowEqual, useSelector } from "react-redux";

import "./index.scss";
import { formatMonthDay } from "@/utils/format-utils";

import HYSongOperationBar from "@/components/song-operation-bar";

const WYRankingHeader = memo(function (props) {
  const rankPlayObj = useSelector(
    (state) => state.getIn(["rank", "rankPlayObj"]),
    shallowEqual
  );
  return (
    <div className="wy-rank-header">
      <div className="image">
        <img src={rankPlayObj.coverImgUrl} alt="" />
        <span className="image_cover">封面</span>
      </div>
      <div className="info">
        <div className="title">{rankPlayObj.name}</div>
        <div className="time">
          <i className="clock sprite_icon2"></i>
          <div>最近更新：{formatMonthDay(rankPlayObj.updateTime)}</div>
          <div className="update-f">（{"每日更新:TODO"}）</div>
        </div>
        <HYSongOperationBar
          favorTitle={`(${rankPlayObj.subscribedCount})`}
          shareTitle={`(${rankPlayObj.shareCount})`}
          downloadTitle="下载"
          commentTitle={`(${rankPlayObj.commentCount})`}
        />
      </div>
    </div>
  );
});

export default WYRankingHeader;
